<!--  -->
<script setup>
import { RouterLink } from 'vue-router'

defineProps(['tag', 'desc', 'cnt'])
</script>

<template>
  <div class="card">
    <div class="header">
      <RouterLink :to="`/tag/${tag}`">
        <span class="tag">{{ tag }}</span>
      </RouterLink>
    </div>
    <div class="body">{{ desc }}</div>
    <div class="footer">
      <div>{{ cnt }} 个问题</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card {
  border: 1px solid var(--border-secondary);
  border-radius: 3px;
  padding: 1em;
  min-width: 200px;
  display: flex;
  flex-direction: column;

  .header {

    .tag {
      padding: 2px .5em;
      border-radius: 2px;
      background-color: var(--bgc-secondary);
      color: var(--text-primary);
      font-weight: bold;
    }
  }

  .body {
    flex: 1;
    margin: 1em 0;

  }
}
</style>
